<template>
  <div class="startAdsMainComponent" v-if="item && item.isEnable" :style="{
      backgroundColor:
        'rgba(' +
        getRGB(item.bgColor) +
        ',' +
        parseFloat((100 - item.bgOpacity) / 100).toFixed(2) +
        ')',
    }">
    <div class="content" :class="item.adStyle === 1 ? 'isFullScreen' : ''">
      <el-carousel trigger="click">
        <el-carousel-item v-for="row in item.list" :key="row.id">
          <a class="link" :href="row.linkUrl" v-if="row.linkUrl && row.linkName && (row.imgUrl||row.default)"><img :src="row.imgUrl||row.default"
              alt="" /></a>
          <img class="noLinkImg" v-if="!row.linkUrl && !row.linkName && (row.imgUrl||row.default)" :src="row.imgUrl||row.default"
            alt="" />
        </el-carousel-item>
      </el-carousel>
      <button class="isFullScreenClose" v-if="item.adStyle===1&&(item.timedOff!=0||item.showCloseBtn)">
        <span v-if="item.timedOff>0">{{item.timedOff}}s</span>
        <span v-if="item.showCloseBtn">关闭</span>
      </button>

      <button class="closeBtn" :class="'wrapper' + item.adStyle">
        <i class="el-icon-circle-close"></i>
      </button>
      <img :src="logo" class="logo" alt="" v-if="item.displayLogo">
    </div>
  </div>
</template>
<script>
  import Bus from "@/utils/bus";
  import menu_img from "@/static/images/menu_img.png";
  import menu_img_active from "@/static/images/menu_img_active.png";
  import logo from "@/assets/img/logo.png";
  export default {
    name: "startAdsMainComponent",
    data() {
      return {
        item: null,
        menu_img,
        logo,
        menu_img_active,
      };
    },
    created() {},
    props: ["controlData"],
    components: {},
    mounted() {
      this.$nextTick(() => {
        this.init();
      });
      Bus.$on("updateStartAdsMainComponentData", (params) => {
        if (params.ename == "list") {
          this.item[params.ename] = JSON.parse(params.data);
        } else {
          this.item[params.ename] = params.data;
        }
      });
      Bus.$on("updateStartAdsMainComponentAllData", (params) => {
        let controlData = JSON.parse(params);
        this.item = JSON.parse(JSON.stringify(controlData.main));
      });
    },
    methods: {
      //页面初始化
      init() {
        let item = JSON.parse(JSON.stringify(this.controlData.main));
        this.item = null;
        this.item = item;
      },
      hexToRgba(hex) {
        let rgbaColor = ''
        const reg = /^#[\da-f]{6}$/i;
        if (reg.test(hex)) {
          rgbaColor = `${parseInt('0x' + hex.slice(1, 3))},${parseInt('0x' + hex.slice(3, 5))},${parseInt('0x' + hex.slice(5, 7))}`;
        }
        return rgbaColor
      },
      getRGB(v) {
        let r = v.substr(1).split("");
        let m1 = this.getNum(r[0], "*"),
          m2 = this.getNum(r[1]),
          m3 = this.getNum(r[2], "*"),
          m4 = this.getNum(r[3]),
          m5 = this.getNum(r[4], "*"),
          m6 = this.getNum(r[5]);
        return m1 + m2 + "," + (m3 + m4) + "," + (m5 + m6);
      },
      getNum(v, t) {
        let b = "0,1,2,3,4,5,6,7,8,9";
        let c = "a_10,b_11,c_12,d_13,e_14,f_15,A_10,B_11,C_12,D_13,E_14,F_15";
        if (b.indexOf(v) > -1) {
          if (t == "*") {
            return parseInt(v) * 16;
          } else {
            return parseInt(v);
          }
        } else if (c.indexOf(v) > -1) {
          if (t == "*") {
            return parseInt(c.substr(c.indexOf(v), 4).split("_")[1]) * 16;
          } else {
            return parseInt(c.substr(c.indexOf(v), 4).split("_")[1]);
          }
        }
      },
    },
    computed: {},
    watch: {},
  };
</script>
<style scoped lang="scss">
  .startAdsMainComponent {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;

    .content {
      width: 60%;
      height: 60%;
      background-color: rgba(255, 255, 255, 0);
      position: relative;

      &.isFullScreen {
        width: 100%;
        height: 100%;
      }

      .logo {
        position: absolute;
        left: 15px;
        top: 15px;
        z-index: 2;
        border-radius: 100%;
      }

      .el-carousel {
        width: 100%;
        height: 100%;
      }

      .link,
      .link img,
      .noLinkImg {
        width: 100%;
        height: 100%;
      }

      .isFullScreenClose {
        position: absolute;
        top: 5px;
        border: none;
        color: #fff;
        right: 10px;
        cursor: pointer;
        background-color: rgba(0, 0, 0, 0.4);
        z-index: 2;
        padding: 3px 7px;
        border-radius: 30px;

        span {
          font-size: 12px;
        }
      }

      .closeBtn {
        position: absolute;
        z-index: 3;
        width: 40px;
        height: 40px;
        padding: 0;
        cursor: pointer;
        background-color: transparent;
        border: none;

        i {
          font-size: 32px;
          color: #fff;
          border-radius: 100%;
        }

        &.wrapper2 {
          bottom: -60px;
          left: 50%;
          transform: translateX(-50%);
        }

        &.wrapper3 {
          right: -30px;
          top: -50px;
        }
      }
    }
  }
</style>
<style lang="scss">
  .startAdsMainComponent {
    .content {
      .el-carousel__container {
        width: 100%;
        height: 100%;

        .el-carousel__item {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }

      .el-carousel__button {
        background-color: #ddd;
        width: 8px;
        height: 8px;
        border-radius: 100%;
      }

      .is-active {
        .el-carousel__button {
          background-color: #ff4500 !important;
        }
      }
    }
  }
</style>
